<template>
	<view class="">
		<!-- 头部 -->
		<!-- #ifndef MP-WEIXIN -->
		<public-header :title="title"></public-header>
		<view class="hei_100"></view>
		 <!-- #endif -->
		<view class="xian-gray16"></view>
		<!-- end -->

		<!-- 导航 -->
		<view class="tab">
			<text v-for="item in tabs" :key="item.id" :data-id="item.id" class="tit" :class="{ cur: tabCur == item.id }" @click="tabSelect">
				{{ item.title }}
				<text class="cur_sp"></text>
			</text>
		</view>
		<!-- end -->

		<!-- 列表数据 -->
		<view class="lists padd_32">
			<view v-if="tabCur == 0" style="width: 100%;">
				<view class="list clearfix" v-for="item in list" :key="item.id">
					<navigator :url="'/pages/details/details-shop?sid=' + item.id">
						<image class="fl" :src="item.portrait" />
						<view class="fl cont">
							<view class="clearfix top">
								<view class="title fl">{{item.name||''}}</view>
								<view class="follow fr" @click.stop="clear('en', item.id, index)">取消关注</view>
							</view>
							<view class="score">
								<!-- #ifdef MP-WEIXIN -->
								<uni-rate style="width: 100%;min-height: 40rpx;margin-top: 10rpx;" active-color="#FCC800" max="5" is-fill="false" size="18" disabled="true" :value="item.score"></uni-rate>
								 <!-- #endif -->
								<!-- #ifndef MP-WEIXIN -->
								<uni-rate style="width: 100%;margin-top: 10rpx;" active-color="#FCC800" max="5" is-fill="false" size="18" disabled="true" :value="item.score"></uni-rate>
								<!-- #endif -->
							</view>
							<view class="intro">主营业务：{{item.description||''}}</view>
							<view class="adds">地址：{{item.province||''}}{{item.city||''}}{{item.region||''}}{{item.address||''}}</view>
						</view>
					</navigator>
				</view>
			</view>
			<view v-if="tabCur == 2" style="width: 100%;">
				<view class="list1 clearfix" v-for="item in list" :key="item.id">
					<navigator :url="'/pages/details/details-staff?sid=' + item.id">
						<image class="fl" :src="item.portrait" />
						<view class="fl cont1">
							<view class="title1 clearfix">
								{{item.name}}<text class="follow1 fr" @click.stop="clear('em', item.id, index)">取消关注</text>
								<!-- <staff-state v-show="item.statusId" :status="status"></staff-state> -->
							</view>
							<uni-rate active-color="#FCC800" max="5" is-fill="false" size="11" disabled="true" :value="item.score"></uni-rate>
							<view class="intro1">主营业务：{{item.introduction}}</view>
							<view class="nav1 clearfix">
								<view class="fl">
									<text>{{item.currentAge||'-'}}岁</text>
									<text>{{item.nativePlace||'-'}}人</text>
									<text>从业{{item.workExperience||'-'}}年</text>
								</view>
								<!-- <view class="fr">180/天起</view> -->
							</view>
						</view>
					</navigator>
				</view>
			</view>
		</view>
		<!-- end -->
	</view>
</template>

<script>
import PublicHeader from '@/components/PublicHeader.vue';
import ServiceList from '@/components/list/ServiceList.vue';
import { mapState, mapMutations } from 'vuex';
export default {
	components: {
		PublicHeader,
		ServiceList
	},
	computed: mapState(['hasLogin', 'uerInfo']),
	data() {
		return {
			title: '我的关注',
			tabCur: 2,
			follow:true,
			tabs: [
				{
					id: 2,
					type:'em',
					title: '员工关注'
				},
				{
					id: 0,
					type:'en',
					title: '店铺关注'
				}
			],
			list:[]
		};
	},
	onLoad(){
		this.getData()
	},
	methods: {
		toShop(index) {},
		toStaff(index) {},
		clear(val, id, index) {
			var _this = this
			let url = '/personal/center/cancelfavorite/' + val + '/' + _this.uerInfo.userId + '/' + id
			_this.$http
				.get(url, {type: val, id: id})
				.then(function(response) {
					_this.list.splice(index, 1)
				})
				.catch(function(error) {
					console.log(error);
				});
		},
		tabSelect(e) {
			var _this = this;
			_this.tabCur = e.currentTarget.dataset.id * 1;
			this.getData()
		},
		getData() {
			var _this = this
			let url = '/personal/center/getfavoritelist/em/'
			if (_this.tabCur == 0) {
				url = '/personal/center/getfavoritelist/en/'
			}
			_this.$http
				.get(url + this.uerInfo.userId)
				.then(function(response) {
					_this.list = response.data
					console.log(_this.list);
				})
				.catch(function(error) {
					console.log(error);
				});
		}
	}
};
</script>

<style scoped lang="scss">
.top {
	width: 100%;
	min-height: 40rpx;
}
.score{
	width: 100%;
	height: 20rpx;
	margin-top: 30rpx;
}
.tab {
	/* position: fixed; */
	width: 100%;
	/* top: 100rpx; */
	min-height: 100rpx;
	z-index: 100;
}
.tab text {
	text-align: center;
	display: inline-block;
	font-size: 32rpx;
	width: 50%;
	color: #666;
	position: relative;
	line-height: 70rpx;
}
.tab .tit:last-child {
	margin-right: 0;
}
.tab .cur_sp {
	position: absolute;
}
.tab .cur {
	font-weight: 500;
	color: #333;
}
.tab .cur .cur_sp {
	width: 30rpx;
	height: 4rpx;
	background: $uni-color1;
	border-radius: 2rpx;
	left: 50%;
	margin-left: -15rpx;
	bottom: 0;
}
.list1 {
	overflow: hidden;
	padding: 30rpx 0;
	border-bottom: 1rpx solid #dfdfdf;
}
.list1 image {
	width: 170rpx;
	height: 204rpx;
	border-radius: 10rpx;
	background-size: cover;
	background-position: center 0;
}
.list1 .cont1 {
	width: 500rpx;
	margin-left: 16rpx;
}
.list1 .cont1 .title1 {
	font-size: 28rpx;
	color: #333;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
	line-height: 40rpx;
	height: 40rpx;
	margin-bottom: 12rpx;
	font-weight: 500;
	margin-top: 10rpx;
}
.list1 .cont1 .follow1{
	color: $uni-color1;
	font-size: 26rpx;
	line-height: 45rpx;
	
}
.list1 .cont1 .title1 view{
	color: #666;
}

.list1 .cont1 .intro1{
	font-size: 24rpx;
	color: #666;
	letter-spacing: 0.6rpx;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin: 12rpx 0 16rpx 0;
}
.list1 .cont1 .nav1{
	line-height: 32rpx;
	font-size: 24rpx;
	color: #999;
	letter-spacing: 0.6rpx;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}
.list1 .cont1 .nav1 text{
	display: inline-block;
	height: 26rpx;
	line-height: 26rpx;
	border-right: 1rpx solid #999;
	padding-right: 14rpx;
	margin-right: 14rpx;
}
.list1 .cont1 .nav1 text:last-child{
	padding: 0;
	margin: 0;
	border: 0 none;
}
.list1 .cont1 .nav1 .fr{
	font-size: 32rpx;
	color: #FF3428;
	font-weight: 500;
}

.list {
	min-height: 230rpx;
	padding: 30rpx 0;
	border-bottom: 1rpx solid #dfdfdf;
}
.list image {
	width: 210rpx;
	height: 218rpx;
	border-radius: 10rpx;
	background-size: cover;
	background-position: center 0;
}
.list .cont {
	width: 460rpx;
	margin-left: 16rpx;
}
.list .cont .title {
	/* width: 100%; */
	font-size: 32rpx;
	color: #333;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
	line-height: 45rpx;
	height: 45rpx;
	margin-bottom: 20rpx;
}
.list .cont .follow{
	color: $uni-color1;
	font-size: 26rpx;
	line-height: 45rpx;
	
}
.list .cont .intro{
	width: 100%;
	font-size: 24rpx;
	color: #666;
	letter-spacing: 0.6rpx;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin: 6rpx 0;
}
.list .cont .adds{
	font-size: 24rpx;
	color: #999;
	letter-spacing: 0.6rpx;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}
</style>
